<template>
  <div>
    <!-- 
      Template
        1.模板语法
        2.数据绑定使用 Mustache 语法 (双大括号)
      JSX
        1.JavaScript 的语法扩展
        2.数据绑定使用单引号 
     -->
    <p v-pre>Template: {{ message }}</p>
    <p>JSX: { this.message }</p>
    <h3>根据传入的数值变成对应 h标签</h3>
    <div class="box">
      <VNodes :vnodes="getJSXSpan()" />
      <anchored-heading1 :level="1">Hello Alomy</anchored-heading1>
      <anchored-heading2 :level="2">Hello Alomy</anchored-heading2>
      <anchored-heading3 :level="3">Hello Alomy</anchored-heading3>
      <VNodes :vnodes="getAnchoredHeading(4)" />
    </div>
  </div>
</template>

<script>
import AnchoredHeading1 from "./AnchoredHeading.vue";
import AnchoredHeading2 from "./AnchoredHeading.jsx";
import AnchoredHeading3 from "./AnchoredHeading.js";

export default {
  components: {
    AnchoredHeading1,
    AnchoredHeading2,
    AnchoredHeading3,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      message: "Hello World",
    };
  },
  methods: {
    getJSXSpan() {
      return (
        <span style="color: red; fontSize: 20px">Message: {this.message}</span>
      );
    },
    getAnchoredHeading(level) {
      const Tag = `h${level}`;
      return <Tag>Hello Alomy</Tag>;
    },
  },
};
</script>

<style scoped>
.box {
  height: 240px;
  background-color: #ddd;
  border-radius: 4px;
  padding: 10px;
}
</style>
